<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图</title>
  <script src="../lib/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<body>
  <!-- 
    setOption 功能:配置项
    on/off 功能:绑定或解绑事件
    dispatchAction 功能:触发某些行为  分发动作
    clear 功能:清空当前实例,并移除实例当中所有的组件和图表(清空后可再次 setOption)
    dispose 功能:销毁实例 实例销毁后不可设置
    resize 功能:自适应 => window.onresize = echartsInstance.resieze
   -->
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <button id="btn">触发行为</button>
  <button id="clear">清空 clear</button>
  <button id="set">设置 setOption</button>
  <button id="dispose">销毁 dispose</button>
  <script>
    const element = document.getElementById('echarts')
    let mCharts = echarts.init(element)

    var pieData = [{
      name: '淘宝',
      value: 11231
    },
    {
      name: '京东',
      value: 22673
    },
    {
      name: '唯品会',
      value: 6123
    },
    {
      name: '1号店',
      value: 8989
    },
    {
      name: '聚美优品',
      value: 6700
    }
    ]
    const option = {
      legend: {
        data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品'],
      },
      tooltip: {
        show: true
      },
      series: [{
        type: 'pie',
        naem: '饼图',
        data: pieData,
        label: {
          show: true, //是否显示文字
          // formatter:'hhh' //具体显示的内容
          formatter: function (arg) {
            return `${arg.data.name} ${arg.data.value}元 \n ${arg.percent}%`
          }
        },
        selectedMode: 'single', //选中效果 偏离圆点一小段距离
        selectedOffset: 30 //偏移量
      }]
    }
    mCharts.setOption(option)

    // 这两个不一样
    // element.addEventListener('click',function (e){
    //   console.log(e);
    // })

    mCharts.on('click', function (arg) {
      console.log(arg);
      // 解绑事件
      mCharts.off('click')
    })

    // 图例选中项发生改变时
    mCharts.on('legendselectchanged', function (arg) {
      console.log(arg);
    })


    $('#btn').click(function () {
      console.log(1);
      // 模拟用户行为
      mCharts.dispatchAction({
        // 高亮指定的数据图形。
        type: 'highlight',
        // 系列的索引
        seriesIndex: 0,
        // 数据的索引 =>淘宝
        dataIndex: 0
      })
      mCharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0
      })
    })

    $('#clear').click(function (){
      mCharts.clear()
    })

    $('#set').click(function (){
      mCharts.setOption(option)
    })

    $('#dispose').click(function (){
      mCharts.dispose()
    })
  </script>
</body>

</html>